<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>slide menu</title>
	<style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

		.menu {            
			margin: 100px;
            width: 200px;            
		}

		ul {
			list-style: none;	            
            border: 1px solid #CCCCCC;
		}

        ul.main {
            border-right: none;
        }

        ul.main div  ul {
            border-left: none;
			border-right: none;
        }

		ul  li {
			padding: 40px;            
			cursor: pointer;                    
		}
       
		ul.main li  div {
			position: absolute;
			display: none;            
			top: 100px;
			left: 150px;
		}
        
		ul.main li {
            border: none;
            border-right: 1px solid #CCCCCC;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }

		ul.main  li:hover {
            border-right: none;            
            border-top-color: #CCCCCC;
            border-bottom-color: #CCCCCC;
		}

        ul.main  li:first-child:hover {
            border-top: none;
        }

        ul.main  li:last-child:hover {
            border-bottom: none;
        }

	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('ul.main > li').hover(function() {
				$(this).children('div').css('z-index', '9').css('display', 'inline');
				$(this).children('div').animate({left: '300px'});
			}, function() {
				var func = arguments.callee;
                var self =  $(this);

				//console.debug(self.children('div')[0].isHide);
				//console.debug('====');
                //if(self.children('div')[0].isHide)
					//return self.children('div').css('z-index','0').fadeOut().animate({left: '150px'});
                //setTimeout(function() {func.apply(self[0]);}, 1000);
			}).children('div').hover(function(){
				this.isHide = false;
			}, function() {
				//console.debug(this);
				this.isHide = true;
				$(this).css('z-index','0').fadeOut().animate({left: '150px'});
			})
		});
	</script>
</head>
<body>
<div class="menu">
	<ul class="main">
		<li> Menu 1
			<div>
				<ul>
					<li> 1.1</li>
					<li> 1.2</li>
					<li> 1.3</li>
					<li> 1.4</li>
				</ul>
			</div>
		</li>
		<li> Menu 2
			<div>
				<ul>
					<li> 2.1</li>
					<li> 2.2</li>
					<li> 2.3</li>
					<li> 2.4</li>
				</ul>
			</div>
		</li>
		<li> Menu 3
			<div>
				<ul>
					<li> 3.1</li>
					<li> 3.2</li>
					<li> 3.3</li>
					<li> 3.4</li>
				</ul>
			</div>
		</li>
		<li> Menu 4
			<div>
				<ul>
					<li> 4.1</li>
					<li> 4.2</li>
					<li> 4.3</li>
					<li> 4.4</li>
				</ul>
			</div>
		</li>
	</ul>
</div>
</body>
</html>